<template>
  <top-bar />
  <div class="detail-box">
    <div
      :class="'quick-bar' + (showQuickbar ? ' show-bar' : '')"
      @click="navToTop"
    >
      <div class="iconfont icon-arrow-top"></div>
      <div>TOP</div>
    </div>
    <!--左半部分-->
    <div class="left-part">
      <!--顶部tag-->
      <div class="music-img">
        <img v-if="detailInfo.coverImgUrl" :src="detailInfo.coverImgUrl" />
      </div>
      <div class="music-info">
        <div class="music-description">
          <div class="music-tag">
            <img src="../assets/images/tag.png" /><span class="special-tag"
              >&reg;</span
            >
          </div>
          <div class="decription-contents">
            [华语节奏布鲁斯] 情绪辗转反侧 雾气消散不开
          </div>
        </div>
        <!--作者信息-->
        <div class="author-info">
          <div class="author-avatar">
            <img
              v-if="detailInfo.creator && detailInfo.creator.avatarUrl"
              :src="detailInfo.creator.avatarUrl"
            />
          </div>
          <div class="author-nickname">
            <span><a>云音乐官方歌单</a></span>
            <img
              v-if="detailInfo.creator"
              alt=""
              :class="
                detailInfo.creator.avatarDetail != undefined &&
                detailInfo.creator.avatarDetail != null &&
                detailInfo.creator.avatarDetail.identityIconUrl != undefined
                  ? 'auth-tag'
                  : 'hide-auth-tag'
              "
              :src="
                detailInfo.creator.avatarDetail != undefined &&
                detailInfo.creator.avatarDetail != null &&
                detailInfo.creator.avatarDetail.identityIconUrl != undefined
                  ? detailInfo.creator.avatarDetail.identityIconUrl
                  : ''
              "
            />
          </div>
          <div class="create-time">2021-04-09 创建</div>
        </div>
        <!--播放控制栏-->
        <div class="play-info">
          <div class="play-control">
            <div class="iconfont icon-play">播放</div>
            <div class="iconfont icon-add"></div>
          </div>
          <div class="play-detail-info">
            <div class="save-count iconfont icon-save">
              {{ "（" + detailInfo.subscribedCount + "）" }}
            </div>
            <div class="share-count iconfont icon-share">
              {{ "（" + detailInfo.shareCount + "）" }}
            </div>
            <div class="download-count iconfont icon-download">下载</div>
            <div class="comment-count iconfont icon-comment">
              {{ "（" + detailInfo.commentCount + "）" }}
            </div>
          </div>
        </div>
        <!--标签栏-->
        <div class="tag-box">
          <div>标签：</div>
          <span v-for="(item, index) in detailInfo.tags">{{ item }}</span>
        </div>
        <!--介绍-->
        <div class="discription">
          <div><span>介绍：</span></div>
          <div>
            {{ detailInfo.description }}
          </div>
        </div>
      </div>
    </div>
    <div class="right-part"></div>
  </div>
</template>
<script setup>
import topBar from "../components/music-top.vue";
import { useRoute } from "vue-router";
import { reactive, onMounted, ref } from "vue";
const route = useRoute();
const targetId = route.query.id;
let showQuickbar = ref(false);
let detailInfo = ref(new Object());
function watchScroll() {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  if (scrollTop > 50) showQuickbar.value = true;
  else showQuickbar.value = false;
}
onMounted(async () => {
  const detailResult = await fetch(
    "http://122.112.161.135:3000/playlist/detail?id=" + targetId
  ).then((data) => data.json());
  if (detailResult.code == 200) {
    detailInfo.value = detailResult.playlist;
    console.log("输出路由参数：", detailInfo);
  } else alert("获取详细信息失败");
  window.addEventListener("scroll", watchScroll);
});
</script>
<style>
@import "../assets/css/music-detail.css";
</style>
